<template>
    <div class="_color">
        <div class="profile">
            <div class="profile_left">
                <div style="position: relative;left: -90px;">
                    <div class="profile_right">
                        <img :src="headimg"/>
                    </div>
                </div>
                <div style="position: relative;left: -90px;">
                    <span class="label label-info"
                          style="display: inline-block;width: 70%;color: rgb(0,0,0);background-color:white;font-size: 20px;text-align: left">{{userName}}</span>
                </div>
                <div class="profile_left_jiange">

                    <span class="label label-info"
                          style="background-color: white;color: rgb(166,166,166);width: 20%;text-align: left;margin: 10px;margin-right:0px;display: inline-block;font-size: 20px;">账号</span>
                    <span class="label label-info"
                          style="display: inline-block;width: 70%;color: rgb(0,0,0);background-color:white;font-size: 20px;text-align: left">{{account}}</span>
                    <span class="label label-info"
                          style="background-color: white;color: rgb(166,166,166);width: 20%;text-align: left;margin: 10px;margin-right:0px;display: inline-block;font-size: 20px;">邮箱</span>
                    <span class="label label-info"
                          style="display: inline-block;width: 70%;color: rgb(0,0,0);background-color:white;font-size: 20px;text-align: left">{{email}}</span>
                    <span class="label label-info"
                          style="background-color: white;color: rgb(166,166,166);width: 20%;text-align: left;margin: 10px;margin-right:0px;display: inline-block;font-size: 20px;">电话</span>
                    <span class="label label-info"
                          style="display: inline-block;width: 70%;color: rgb(0,0,0);background-color:white;font-size: 20px;text-align: left">{{telephone}}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    module.exports = {
        data: function () {
            return {
                account: '',
                email: '',
                telephone: '',
                userName: '',
                headimg: ''
            }
        },
        ready: function () {
            var _this = this;
            $.post('/api/planb/adminProFile').then(function (data) {
                _this.account = data.content.account;
                _this.email = data.content.email;
                _this.telephone = data.content.telephone;
                _this.userName = data.content.userName;
                _this.headimg = data.content.headimg;
            });
        }
    }
</script>

<style>
    body {
        background-color: #FFFFFF;
    }

    ._color {
        /*background-color: #FFFFFF;*/
    }

    .profile {
        /*background-color: #FFFFFF;*/
        /*  border: 1px #1e88e5 solid;
          border-radius: 5px;*/
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
    }

    .profile_left {
        margin-left: 90px;
        margin-top: 30px;
        width: 100%;
        display: flex;
        flex-flow: column nowrap;
        /*多个也能放在两边*/
        justify-content: flex-start;
        align-items: center;
        /*background-color: yellow;*/
        border-radius: 10px;
        /*box-shadow:2px 2px 2px 2px grey;*/
    }

    .profile_left_jiange {
        /*background-color: green;*/
        border-radius: 10px;
        /*box-shadow:2px 2px 2px 2px grey;*/
        width: 40%;
        margin: 10px;
    }

    .profile_right {
        /*background-image: url('farm.jpg');*/
        /*background-position: center;*/
        /*background-size: cover;*/
        border-radius: 3px;
        /*box-shadow:1px 1px 1px 1px grey;*/
        margin: 10px;
        /*width: 40%;*/
        width: 200px;
        height: 200px;
    }

    .profile_right_img {
        margin: 10px;
        margin-right: 30px;
        /*background-color: pink;*/
        border-radius: 10px;
        box-shadow: 5px 5px 5px 5px grey;
        width: 30%;
    }

    .profile_down {
        margin: 10px;
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
    }
</style>